<template>
  <div class="tabBar">
    <van-tabbar v-model="activeIndex" @change="getChange" class="tabbarBox">
      <van-tabbar-item v-for="(item,index) in tabList" :key="index">
        <span>{{item.name}}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabBar",
  props: {
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabList: [
        {
          name: this.$t("首页"),
          active: require('../assets/images/newImg/hq12.png'),
          inactive: require('../assets/images/newImg/hq11.png'),
        },
		// {
		//   name: this.$t("消息"),
		//   active: require('../assets/images/msg_inactive.png'),
		//   inactive: require('../assets/images/msg_active.png'),
		// },
		{
		  name: this.$t("交易"),
		  active: require('../assets/images/newImg/jy12.png'),
		  inactive: require('../assets/images/newImg/jy11.png'),
		},
        {
          name: this.$t("账户"),
          active: require('../assets/images/newImg/wa12.png'),
          inactive: require('../assets/images/newImg/wa11.png'),
        },
        
        // {
        //   name: this.$t("资产"),
        //   active: require('../assets/images/assets_active.png'),
        //   inactive: require('../assets/images/assets_inactive.png'),
        // },
        {
          name: this.$t("我的"),
          active: require('../assets/images/newImg/my12.png'),
          inactive: require('../assets/images/newImg/my11.png'),
        },
      ],
    };
  },

  mounted() {},
  computed:{
    activeIndex:{
      get(){
        return this.active;
      },
      set(val){
        return val;
      }
    }
  },
  inject: ["reload"],
  methods: {
    getChange(index){
      if (index == 0) {
        this.$router.push('/home');
      } else if(index == 1){
		  this.$router.push('/trade');
        // this.$router.push('/news');
      } else if(index == 2){
        // this.reload();
        this.$router.push('/quotes');
      } else if(index == 3){
		  this.$router.push('/mine');
		  // this.$router.push('/trade');
      } 
	  // else if(index == 4){
   //      this.$router.push('/mine');
   //    }
    }
  },
};
</script>
<style scoped>
	/deep/.van-tabbar-item--active{
		background-color: #21212b;
		color: #edd33a;
	}
	/deep/.van-tabbar-item__icon img{
		width: 20px;
		height: 20px;
	}
</style>
<style lang="scss" scoped>
.tabBar {
  width: 100%;
  position: absolute;
  z-index: 999;
  left: 0;
  bottom: 0;
}
.tabbarBox {
  position: static;
  left: auto;
  bottom: auto;
  z-index: 9999;
  background-color: #21212b;
  color: #fff;
  border-top: 1px solid #21212b;
}

</style>